<template>
	<view class="card-detail">
		<view class="top">
			<card-pack-item :data="data" showQrcode />
			<view style="margin-top: 30rpx;font-weight: 700;font-size: 30rpx;">
				请选择续卡套餐
			</view>
			<view class="" style="width: 100%;height: auto;">
				<view class="card" v-for="(item,index) in pointLits" :key="index" @click="gocard(item,index)"  :class="[selectcard===index?'card_s':'card']">
					<view class="card_ysj" v-if="data.type == 4 || data.type == 1">
						<view  v-if="item.zsong != ''" :class="[selectcard===index?'card_ysj_ls':'card_ysj_s']">减免{{item.zsong}}次</view>
					</view>
					<view class="card_ysj" v-if="data.type == 3">
						<view  v-if="item.zsong != ''" :class="[selectcard===index?'card_ysj_ls':'card_ysj_s']">减免{{item.zsong}}元</view>
					</view>
					<view :class="[selectcard===index?'card_cs_n':'card_cs']" v-if="data.type == 3">
						<text>额度{{item.cika}}元</text>
						<text  :class="[selectcard===index?'card_cs_ss':'card_cs_s']" v-if="item.zsc != ''">+{{item.zsc}}元</text>
					</view>
					<view :class="[selectcard===index?'card_cs_n':'card_cs']"  v-if="data.type == 4 || data.type == 1">
						<text>次数{{item.cika}}次</text>
						<text  :class="[selectcard===index?'card_cs_ss':'card_cs_s']" v-if="item.zsc != ''">+{{item.zsc}}次</text>
					</view>
					<view   v-if="item.money != ''" :class="[selectcard===index?'card_jec':'card_je']">
						￥{{item.name}}
					</view>
					<view   v-if="item.money == ''" :class="[selectcard===index?'card_jec':'card_jes']">
						￥{{item.name}}
					</view>
					<view  v-if="item.money != ''" :class="[selectcard===index?'card_hxs':'card_hx']">
						￥{{item.money}}
					</view>
				</view>
			</view>
			<view style="margin-top: 600rpx;font-weight: 700;font-size: 30rpx;">
				续卡说明
			</view>
			<view style="margin-top: 30rpx;font-size: 26rpx;">
				1.续卡原卡无损坏，能正常使用
			</view>
			<view style="margin-top: 30rpx;font-size: 26rpx;">
				2.续卡后，概不退款
			</view>
			<view style="margin-top: 30rpx;font-size: 26rpx;">
				3.在这里写上续卡说明...
			</view>
			<view class="" style="margin-top: 60rpx;">
				<u-button text="确定充值" shape="circle"  @click="renew"
					color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 65%)"></u-button>
				<!-- <button type="default">确定充值</button> -->
			</view>
		</view>


	</view>
</template>

<script>
	import cardPackItem from '@/pages/personal/card-pack/card-pack-item.vue'
	const index = require('@/api/personal/index.js')
	export default {
		components: {
			cardPackItem
		},
		data() {
			return {
				data: {},
				cardno: '',
				id: 0,
				pointLits: [],
				selectPoint: '',
				selectcard:0,
				venue_id:'',
				meal_item:{},
				datalist:{},
				classNum: 0,
				meal_id:''
			}
		},
		onLoad(options) {
			console.log(options,'111')
			this.cardno = options.cardno
			this.card_id = options.card_id
			this.venue_id = options.venue_id
			this.getMyCardDetail()
		},
		onShow() {
			this.renew_set_meal()
		},
		methods: {
			gocard(item,index) {
				this.selectcard = index
				console.log(item)
				this.meal_item = item
				this.meal_id = item.meal_id
			},

			// 获取我的卡包详情
			async getMyCardDetail() {
				let params = {
					cardno: this.cardno,
					project_id: getApp().globalData.projectId,
					user_id: uni.getStorageSync('phone'),
					open_id: uni.getStorageSync("openid"),
					appid: this.$https.weixinAppId,
					id:this.card_id 
				}
				let res = await index.getMyCardDetail(params)
				if (res.code === 1) {
					this.data = res.data.cardData
				}
			},
			async renew_set_meal() {
				let params = {
					id: this.card_id,
					venue_id: this.venue_id,
				}
				let res = await index.renew_set_meal(params)
				if (res.code === 1) {
					this.pointLits = res.data
				}
			},
			
			// 获取我的卡包详情
			async renew() {
				let that = this
				let payWaitTime = '00:15:00'
				if (that.meal_id  == '') {
					uni.showToast({
						title: '请选择续卡套餐',
						icon: 'none'
					})
					return
				}
				let params = {
					id:this.card_id,
					meal_id:this.meal_item.id,
					venue_id: this.venue_id,
					pay_method: '5',
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					remark:''
				}
				let res = await index.renew_meal(params)
				if (res.code === 1) {
					this.datalist = res.data.info
					if (res.data.info.order_money >= '0.01') {
						uni.navigateTo({
							url: "/page_venues/pages/venuesDetail/pay/pay?amount=" +
								that.datalist.order_money +
								"&payWaitTime=" +
								payWaitTime +
								"&venue_id=" +
								that.datalist.venue_id +
								"&order_id=" +
								that.datalist.order_id +
								"&orderid=" +
								that.datalist.orderid +
								"&order_type=" +
								that.datalist.ordertype +
								"&chaoshitype=" +
								2 + "&classNum=" +
								that.classNum +
								"&train_price=" +
								that.datalist.order_money +
											"&goods_id=" +
											that.datalist.id,
						});
					} else {
						this.moniPay()
					}
				}else {
					uni.showToast({
						title: res.info,
						icon: 'none'
					})
				}
			},
			// order_type 21挂失   22补卡  23  延期
			async moniPay() {
				var nowdate = new Date().valueOf();
				var that = this;
				let params = {
					app_id: that.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					id: that.data.id,
					venue_id: that.data.venue_id,
					price: '0', //价格
					pay_method: 1, //支付方式
					order_money: '0', //应付
					remark: that.remark, //备注
					add_time: nowdate,
					out_trade_no: that.resultlist.order_id,
					transaction_id: 'ZF001',
					goods_id: '1',
					order_type: that.resultlist.ordertype
				};
				let res = await venues.moniPay(params);
				if (res.code == 1) {
					uni.navigateTo({
						url: '/pages/personal/personal?backUp=1'
					})
			
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import url("@/static/css/personal/index.css");

	.card-detail {
		padding-bottom: env(safe-area-inset-bottom);

		.top {
			padding: 30rpx;
			
			
		}
		.card{
			width: 30%;
			height: 160rpx;
			border: 1rpx #2f75fa solid;
			border-radius: 10rpx;
			margin-top: 30rpx;
			float: left;
			margin-left: 16rpx;
			background-color: #ffffff;
		}
		.card_s{
			width: 30%;
			height: 160rpx;
			background-color: #2f75fa;
			border-radius: 10rpx;
			margin-top: 30rpx;
			float: left;
			margin-left: 16rpx;
			color: #ffffff !important;
		}
		
		.card_hx{
			text-decoration: line-through;
			color: #cfcfcf;
			font-size: 22rpx;
			text-align: center;
			margin-top: 5rpx;
		}
		.card_hxs{
			text-decoration: line-through;
			color: #fff;
			font-size: 22rpx;
			text-align: center;
			margin-top: 5rpx;
		}
		
		.card_ysj{
			width: 50%;
			height: 30rpx;
			color: #ffffff;
			// background-color: rgb(255, 255, 255);
			font-size: 18rpx;
			text-align: center;
			border-radius: 10rpx 0 10rpx 0;
		}
		.card_ysj_s{
			width: 100%;
			height: 30rpx;
			background-color: rgb(255, 91, 188);
			border-radius: 10rpx 0 10rpx 0;
		}
		.card_ysj_ls{
			width: 100%;
			height: 30rpx;
			background-color: rgb(255, 91, 188);
			border-radius: 10rpx 0 10rpx 0;
		}
		.card_cs{
			font-size: 26rpx;
			text-align: center;
			color: #2f75fa;
			margin-top: 5rpx;
		}
		.card_cs_n{
			font-size: 26rpx;
			text-align: center;
			color: #ffffff;
			margin-top: 5rpx;
		}
		.card_cs_s{
			color: #f75200;
		}
		.card_cs_ss{
			color: #ffffff;
		}
		.card_je{
			font-size: 36rpx;
			color: #000;
			text-align: center;
			margin-top: 5rpx;
		}
		.card_jec{
			font-size: 36rpx;
			color: #FFFFFF;
			text-align: center;
			margin-top: 5rpx;
		}
		.card_jes{
			font-size: 36rpx;
			color: #f75200;
			text-align: center;
			margin-top: 5rpx;
		}
		.text-blue {
			font-size: 24rpx;
			color: #2f75fa;
			text-align: center;
		}


		/deep/.u-row {
			margin-top: 40rpx;

			.box {
				border-radius: 12rpx;
				background-color: #f3f3f3;
				padding: 40rpx 0;

				.number {
					color: #2f75fa;
					margin-bottom: 40rpx;
					font-weight: bold;
				}
			}
		}

		/deep/.u-cell-group {
			.name {
				color: #333;
				font-weight: bold;
			}

			.number {
				color: #ff4105;
			}

			.date {
				color: #ccc;
			}

			.rest {
				color: #9c9c9c;
			}

			.rest,
			.date {
				margin-top: 14rpx;
				font-size: 26rpx;
			}
		}
	}
</style>
